<template>
  <div>
    <!--  1.0表头 -->
    <div class="navbar">传智播客.黑马程序员Vue.js</div>

    <router-view></router-view>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item icon="search" to="/huiyuan">会员</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/gouwuche">购物车</van-tabbar-item>
      <van-tabbar-item icon="setting-o" to="/sousuo">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>

<style lang="less" scoped>
.navbar {
  size: 13px;
  height: 30px;
  text-align: center;
  background-color: #26a2ff;
  color: #fff;
  line-height: 30px;
}
</style>